<template>
	<div  class="movie">
        <div class="page-content">
            <swiper 
                ref="swiper" 
                direction="horizontal" 
                width="100%" 
                height="210"
                pager-color="#ea5a49" 
                pager-bg-color="#e5e4e3"
                hide-pager="false"
                >
                <swiper-item class="swiper-item">
                    <img src="../assets/img/slide-001.jpg" alt="">
                </swiper-item>

                <swiper-item class="swiper-item">
                    <img src="../assets/img/slide-002.jpg" alt="">
                </swiper-item>
            </swiper>
            <sub-nav></sub-nav>
            
            <div class="movie-list-wrap">
                <movie-list title="正在热映" :items="hotMovies"></movie-list>
                <movie-list title="即将上映" :items="timeMovies"></movie-list>
                <movie-list source="猫眼" title="猫眼电影" :items="smallMovies"></movie-list>
            </div>

            <news-list title="娱乐快讯" :items="yuleNews"></news-list>

			
        </div>
         <foot-menu></foot-menu>
	</div>
</template>

<script>
    import { mapState } from 'vuex'

    import FootMenu from '../components/FootMenu'
    import SubNav from '../components/SubNav'
    import MovieList from '../components/MovieList'
    import NewsList from '../components/NewsList'
	export default {
		name: 'movie-view',
        components: { FootMenu, SubNav, MovieList, NewsList },
		data () {
			return {
                // msg: '你好呀22',
			}
		},
        computed: {
            // Getting Vuex State from store/modules/movie
            ...mapState({
                hotMovies: state => state.movie.hotMovies,
                timeMovies: state => state.movie.timeMovies,
                smallMovies: state => state.movie.smallMovies,
                yuleNews: state => state.movie.yuleNews
            })
        },
        methods: {
            getSouces: function () {
                this.$store.dispatch('getMovie');
                this.$store.dispatch('getNews')
            },
            // getNews: function () {
            // 	this.$store.dispatch('getNews')
            // }
        },
        created () {
            this.getSouces()
        }
	}
</script>

<style lang="sass">
    body {
        overflow: scroll;
    }
	.movie {
        .page-content {
            padding-bottom: 60px;
            .swiper-item {
                img {
                    width:100%;
                }
            }
            .swiper-pagination {
                display: none;
            }
        }
        
    }
</style>